<template>
    <div class="manage">
        <div class="top-wrapper">
            <h3>管理</h3>
            <span class="iconUser">
                <i class="iconfont icon-touxiang"></i>    
            </span>
            <p v-if="nickName.nickName">
                 <span >{{nickName.nickName}}</span>
            </p>
            <p class="toLogin" @click="toLogin" v-else> 
                <span>登录</span>
            </p>     
        </div>
        <div class="money">{{price|priceFiler}}</div>
        <div class="content-wrapper">
            <ul>
                <li class="myGift">
                    <router-link to="/">
                        <span class="icon">
                            <i class="iconfont icon-libao"></i>
                        </span>
                        <p>
                            我的礼包
                        </p>
                    </router-link>
                </li>
                <li class="downManage">
                    <router-link  to="/">
                         <span class="icon">
                            <i class="iconfont icon-xiazai"></i>
                        </span>
                        <p>
                            下载管理
                        </p>
                    </router-link>
                </li>
                <li class="service">
                    <router-link  to="/">
                        <span class="icon">
                            <i class="iconfont icon-kefu"></i>
                        </span>
                        <p>
                            美女客服
                        </p>
                    </router-link>
                </li>
            </ul>
        </div>
        <router-view></router-view>
    </div> 
</template>
<script>
import {mapGetters} from 'Vuex'
    export default{
        data(){
            return{
                userMsg:'立即登录',
                price:'13.666'
            }
        },
        computed:{
            ...mapGetters([
                'nickName'
            ])
            // nickName(){
            //     return this.$store.state.nickName;
            // }
        },
        methods:{
            toLogin(){
                this.$router.push({
                    path:`/manage/login`
                })
            },
            // getUser(){
            //     var userMsg=JSON.parse(localStorage.getItem("userMsg"));
            //     if(userMsg){
            //          this.userMsg=userMsg;
            //     }else{

            //     }
               
            // }
        },
        filters:{
            priceFiler:function(val){
            if(!val) return ''
             return  parseFloat(val).toFixed(2)
            }
        }
        // watch:{
        //     userMsg(oldName,newName){
        //         console.log(oldName,newName);
        //     }
        // }
    }
</script>
<style lang="scss" scoped>
    .manage{
        position: fixed;
        top: 0;
        width: 100%;
        bottom: 40px;
        background: #fff;
        z-index: 999;
        .top-wrapper{
            width:100%;
            height:180px;
            background:#000;
            p{
                font-size:14px;
                color:#fff;
                text-align:center;
            }
            h3{
                margin:0;
                color:#fff;
                text-align:center;
                padding-top:40px;
            }
            .iconUser{
                text-align:center;
                width:100%;
                display:block;
                margin:20px 0;
                i{
                    font-size:50px;
                    color:#fff;
                }
            }
        }
        .content-wrapper{
            ul{
                display:flex;
                width:100%;
                padding:0;
                li{
                    flex:1;
                    text-align:center;
                    list-style-type: none;
                    p{
                        font-size:12px;
                    }
                    .icon{
                        display:block;
                        width:60px;
                        margin:0 auto;
                        height:60px;
                        line-height:60px;
                        text-align:center;
                        border-radius:10px;
                        .iconfont{
                            color:#fff;
                            font-size:26px;
                        }
                    }
                    &.myGift{
                        .icon{
                            background:orange;
                        }
                    }
                    &.downManage{
                        .icon{
                            background:blue;
                        }
                    }
                    &.service{
                        .icon{
                            background:pink;
                        }
                    }
                }
            }
        }
    }
</style>

